<script lang="ts" setup>
// 组件
import collapse from "./collapse.vue"; // 折叠面板组件

// Store
import { useCanvasStoreHook } from "@/stores/modules/canvas"; // 画布
import { getKeyValue } from "@/hooks/canvas/useCanvas"; // tags处理后的获取对象方法
import { useKBStoreHook } from "@/stores/modules/KB/index";

const useKBStore = useKBStoreHook(); // tags

const useCanvasStore = useCanvasStoreHook(); // 画布
const tags = computed(() => useCanvasStore.getStatistics());
// console.log(tags, "tags");
</script>

<template>
  <div>
    <template v-if="!tags.length">
      <el-empty description="暂无数据" />
    </template>
    <div v-else>
      <collapse v-for="(item, index) in tags" :key="index" :title="item.name">
        <div>
          <collapse
            v-for="(ele, k) in item.children"
            :key="k"
            class="coollapse-details"
            :is-padding="false"
            :title="ele.label"
            background="#fff"
          >
            <div class="form-msg">
              <dl v-for="(value, key) in ele.properties" :key="key">
                <dt>{{ getKeyValue(item.code, `props_${key}`) }}：</dt>
                <dd>{{ value }}</dd>
              </dl>
            </div>

            <template v-if="!ele.edges.length">
              <span class="empty">暂无关联节点</span>
            </template>
            <div v-else>
              <div class="keys-title">
                <span>主要关联节点</span>
              </div>

              <table class="w-full text-[14px]">
                <thead class="h-[40px] bg-[#F7F8FA] border-b border-[#EDEFF4]">
                  <tr class="text-left">
                    <th class="px-[8px]">序号</th>
                    <th class="px-[8px]">节点名称</th>
                    <th class="px-[8px]">节点类型</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(value, key) in ele.edges"
                    :key="key"
                    class="h-[40px] border-b border-[#EDEFF4]"
                  >
                    <td class="px-[8px]">{{ key + 1 }}</td>
                    <td class="px-[8px]">
                      {{ useCanvasStore.getNodesItem(value, "label") }}
                    </td>
                    <td class="px-[8px]">
                      {{
                        useKBStore.tags.find(
                          (item) =>
                            item.code ==
                            useCanvasStore.getNodesItem(value, "tageName") // 这个是节点类型，需在所以的tags里面把类型翻译出来
                        )?.name
                      }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </collapse>
        </div>
      </collapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-msg {
  display: flex;
  flex-direction: column;

  dl {
    display: flex;
    align-items: center;
    margin-top: 16px;

    dt {
      flex: 1;
      font-family: PingFangSC-Regular, "PingFang SC";
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #7f8a9b;
      text-align: right;
    }

    dd {
      width: 200px;
      margin-left: 8px;
      font-family: PingFangSC-Regular, "PingFang SC";
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #222;
      word-break: break-all;
    }
  }
}

.keys-title {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 0;
  margin-top: 5px;
  border-bottom: 1px solid #edeff4;

  > span {
    padding-left: 8px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    color: #2b1dff;
    border-left: 3px solid #2b1dff;
  }
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: PingFangSC-Regular, "PingFang SC";
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #7f8a9b;
}

.coollapse-details {
  :deep .coollapse-head > span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
